<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Hope2</title>

    <link rel="stylesheet" href="https://lib.baomitu.com/bulma/0.9.1/css/bulma.css">
    <link rel="shortcut icon" href="/favicon.ico">
    <link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="http://www.datatables.net/rss.xml">
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.13.4/css/jquery.dataTables.min.css">
    <script type="text/javascript" language="javascript"
            src="https://lib.baomitu.com/jquery/3.5.1/jquery.min.js"></script>
    <script type="text/javascript" language="javascript"
            src="https://cdn.datatables.net/1.13.4/js/jquery.dataTables.min.js"></script>
    <script type="text/javascript">
        var table;

        function post() {
            var style = $('input:radio[name="style"]:checked').val();
            var link = "/rps/stocks/" + style;
            $.getJSON(link, function (data) {
                $("#genTime").html(data.generateTime);
                table.clear().rows.add(data.items).columns.adjust().draw();
            });
        }


        $(document).ready(function () {
            table = $('#stockTable').DataTable({
                order: [[3, "desc"]],
                columns: [
                    {
                        data: 'code'
                    },
                    {data: 'name'},
                    {data: 'rps10'},
                    {data: 'rps20'},
                    {data: 'rps30'},
                    {data: 'rps60'},
                    {data: 'rps120'},
                    {data: 'rps250'},
                    {
                        data: 'code',
                        render: function (data, type, row, meta) {
                            var code = row.code;
                            return type === 'display' ?
                                `<a href="/demark-flag.html?code=${code}" target="_blank">图形版</a>` + '&nbsp;&nbsp;&nbsp;&nbsp;    ' +
                                `<a href="/demark-backtrack/${code}" target="_blank">数据版</a>` :
                                data;
                        }
                    }
                ]
            });
            post();
        });
    </script>
</head>
<body class="layout-default">
<nav id="navbar" class="bd-navbar navbar has-shadow is-spaced">
    <div class="container">
        <div class="navbar-brand">
            <a class="navbar-item" href="https://qianyitian.com/">
                <img style="height:36px;width:36px;" src="https://img.qianyitian.com/icon/logo.png">  <h4
                    class="title is-3">Hope2</h4>
            </a>
        </div>
    </div>
</nav>

<section class="hero is-light is-info">
    <div class="hero-body">
        <div class="container">
            <h1 class="title">
                RPS指标是指在一段时间内，个股涨幅在全部股票涨幅排名中的位次值。
            </h1>
            <h2 class="subtitle" id="description">
                RPS指标衡量了某股票在过去一段时间，相对市场中其他股票的表现。市场内每只股票都被指定了0-100范围内的某一数值，100代表相对强度最高.
            </h2>
            <p> 积极： 某个维度高于阈值则显示</p>
            <p> 稳健： 所有维度高于阈值则显示</p>
            <p> 生成时间：<label id="genTime"></label></p>
            </p>
        </div>
    </div>
</section>
<section class="section">
    <div class="container">
        <div class="field">
            <div class="control">
                <label class="label">基金风格</label>
                <label class="radio">
                    <input type="radio" name="style" value='aggressive' onclick="post()" checked>
                    积极
                </label>
                <label class="radio">
                    <input type="radio" name="style" value='stable' onclick="post()">
                    稳健
                </label>
            </div>
        </div>
    </div>
</section>

<section class="section">
    <div class="container">
        <table id="stockTable" class="display compact" style="width:100%">
            <thead>
            <tr>
                <th>代码</th>
                <th>名称</th>
                <th>RPS10</th>
                <th>RPS20</th>
                <th>RPS30</th>
                <th>RPS60</th>
                <th>RPS120</th>
                <th>RPS250</th>
                <th>DeMark回溯</th>
            </tr>
            </thead>
        </table>
    </div>
</section>
<hr>
</body>
</html>